<template>
    <div class="mainSty">
        <div class="main_con_sty">
            <div class="con_tit flex_str">
                <div>定位: </div>
                <el-input style="width:180px;margin-right: 30px;" v-model="houseParams.position" disabled></el-input>
                <div>小区名: </div>
                <el-input style="width:180px;margin-right: 30px;" v-model="houseParams.communityName"
                    disabled></el-input>
                <div>备案名: </div>
                <el-input style="width:180px;" v-model="houseParams.recordName" disabled></el-input>
            </div>

            <div class="con_tit flex_str">
                <div>建筑面积: </div>
                <el-input style="width:180px;" type="number" v-model="houseParams.constructionArea" disabled></el-input>
                <div>楼栋号: </div>
                <el-input style="width:180px;" v-model="houseParams.buildingNo" disabled></el-input>
            </div>

            <div class="con_tab_sty flex_str">
                <div v-for="(item, index) in conTabList" :key="index" @click="conTabClick(item.id)"
                    :style="conTabId == item.id ? 'color: #00D8EB;border-bottom: 2px solid #00D8EB;' : 'border-bottom: 2px solid #fff;'">
                    {{ item.name }}
                </div>
                <!-- <div class="saveBtnSty">全部保存</div> -->
            </div>
            <!-- --原始框架cad start -- -->
            <div class="flex_str_str" style="margin-top: 50px;" v-show="conTabId == 1">
                <div class="imgNameSty">
                    <div><span style="color: #00D8EB;">*</span>原始框架图片：</div>
                </div>
                <div style="width: 600px;">
                    <img v-for="(item, _index) in fileInfoList[0].drawingPathList" :src="item"
                        style="width: 130px;margin-right: 12px;">
                </div>
            </div>

            <div class="flex_str" style="margin: 40px 0;" v-show="conTabId == 1">
                <div class="wenjian_tit_sty"><span style="color: #00D8EB;">*</span>原始框架文件：</div>

                <div>{{ fileInfoList[0].cadFileName }}</div>
                <div class="btnSty" @click="downFileFun(houseParams.id, fileInfoList[0].houseFileId)">点击下载</div>
            </div>
            <div class="flex_str" v-show="conTabId == 1">
                <div>原始价格： </div>
                <el-input class="priceIptSty" v-model="fileInfoList[0].price"></el-input>
                <div>会员价格: </div>
                <el-input class="priceIptSty" v-model="fileInfoList[0].vipPrice" @input="priceIptChange"></el-input>
            </div>
            <!-- --原始框架cad end -->


            <!-- --平面方案cad start -- -->
            <div class="flex_str" style="margin-top: 50px;" v-show="conTabId == 2">
                <div class="imgNameSty">
                    <div><span style="color: #00D8EB;">*</span>平面方案图片：</div>
                </div>
                <div style="width: 600px;">
                    <img :src="item" style="width: 130px;margin-right: 12px;"
                        v-for="(item, _index) in fileInfoList[1]['drawingPathList']">
                </div>
            </div>

            <div class="flex_str" style="margin-top: 50px;margin-bottom: 50px;" v-show="conTabId == 2">
                <div class="wenjian_tit_sty"><span style="color: #00D8EB;">*</span>平面方案cad文件：</div>

                <div>{{ fileInfoList[1].cadFileName }}</div>
                <div class="btnSty" @click="downFileFun(houseParams.id, fileInfoList[1].houseFileId)">点击下载</div>
            </div>
            <div class="flex_str" v-show="conTabId == 2">
                <div>原始价格： </div>
                <el-input class="priceIptSty" v-model="fileInfoList[1].price"></el-input>
                <div>会员价格: </div>
                <el-input class="priceIptSty" v-model="fileInfoList[1].vipPrice" @input="priceIptChange"></el-input>
            </div>
            <!-- --平面方案cad end -->

            <!-- --效果图 start-- -->
            <div class="flex_str" style="margin-top: 50px;" v-show="conTabId == 3">
                <div class="imgNameSty">
                    <div><span style="color: #00D8EB;">*</span>效果图图片/全景二维码：</div>
                </div>
                <div style="width: 600px;">
                    <img :src="item" style="width: 130px;margin-right: 12px;"
                        v-for="(item, _index) in fileInfoList[2]['drawingPathList']">

                </div>
            </div>
            <div class="flex_str_clon" style="margin-top: 50px;" v-show="conTabId == 3">
                <div style="margin-right: 30px;"><span style="color: #00D8EB;">*</span>全景链接上传:</div>
                <div>
                    <textarea class="text_area_sty" v-model="fileInfoList[2].externalLinks" disabled></textarea>
                </div>
            </div>
            <div class="flex_str" v-show="conTabId == 3">
                <div>原始价格： </div>
                <el-input class="priceIptSty" v-model="fileInfoList[2].price"></el-input>
                <div>会员价格: </div>
                <el-input class="priceIptSty" v-model="fileInfoList[2].vipPrice" @input="priceIptChange"></el-input>
            </div>
            <!-- 效果图 end -->


            <!-- 实景照片start -->
            <div class="flex_str" style="margin-top: 50px;" v-show="conTabId == 4">
                <div class="imgNameSty">
                    <div><span style="color: #00D8EB;">*</span>实景图片/实景二维码：</div>
                </div>
                <div style="width: 600px;">
                    <img :src="item" style="width: 130px;margin-right: 12px;"
                        v-for="(item, _index) in fileInfoList[3]['drawingPathList']">

                </div>
            </div>
            <div class="flex_str_clon" style="margin-top: 50px;" v-show="conTabId == 4">
                <div style="margin-right: 30px;"><span style="color: #00D8EB;">*</span>实景链接上传:</div>
                <div>
                    <textarea class="text_area_sty" v-model="fileInfoList[3].externalLinks" disabled></textarea>
                </div>
            </div>
            <div class="flex_str" v-show="conTabId == 4">
                <div>原始价格： </div>
                <el-input class="priceIptSty" v-model="fileInfoList[3].price"></el-input>
                <div>会员价格: </div>
                <el-input class="priceIptSty" v-model="fileInfoList[3].vipPrice" @input="priceIptChange"></el-input>
            </div>
            <!-- 实景照片end-->
            <!-- 量房照片start -->
            <div class="flex_str" style="margin-top: 50px;" v-show="conTabId == 5">
                <div class="imgNameSty">
                    <div><span style="color: #00D8EB;">*</span>量房图片/量房二维码：</div>
                </div>
                <div style="width: 600px;">
                    <img :src="item" style="width: 130px;margin-right: 12px;"
                        v-for="(item, _index) in fileInfoList[4]['drawingPathList']">

                </div>
            </div>
            <div class="flex_str_clon" style="margin-top: 50px;" v-show="conTabId == 5">
                <div style="margin-right: 30px;"><span style="color: #00D8EB;">*</span>量房链接上传:</div>
                <div>
                    <textarea class="text_area_sty" v-model="fileInfoList[4].externalLinks" disabled></textarea>
                </div>
            </div>
            <div class="flex_str" v-show="conTabId == 5">
                <div>原始价格： </div>
                <el-input class="priceIptSty" v-model="fileInfoList[4].price"></el-input>
                <div>会员价格: </div>
                <el-input class="priceIptSty" v-model="fileInfoList[4].vipPrice" @input="priceIptChange"></el-input>
            </div>
            <!-- 量房照片end-->
        </div>

    </div>
    <el-dialog v-model="dialogVisible">
        <img w-full :src="dialogImageUrl" alt="Preview Image" />
    </el-dialog>
</template>
<script setup lang="ts">
import { ref, reactive, inject, watch, onMounted } from 'vue'
import { getHouseInfoApi, downFileApi } from '@/api/index/index'
interface houseType {
    houseFileId: number | string,
    drawingPathList: any[],
    price: number | string,
    vipPrice: number | string,
    type: number | string,
    externalLinks: string,
    cadFileName: string
}
const emit = defineEmits(['priceChange'])

// 选择的框架模板
const frameValue = ref([])
const frameList = ref([
    {
        value: '1',
        label: 'MAX 2022'
    }, {
        value: '2',
        label: 'MAX 2021'
    }, {
        value: '3',
        label: 'MAX 2020'
    }, {
        value: '4',
        label: 'MAX 2019'
    }, {
        value: '5',
        label: 'MAX 2018'
    }
])
const fileList = ref<any[]>([
    {
        name: '',
        url: ''
    }, {
        name: '',
        url: ''
    }, {
        name: '',
        url: ''
    }, {
        name: '',
        url: ''
    }
])
console.log('文件列表:', fileList.value)
const dialogImageUrl = ref('')
const dialogVisible = ref(false)
const city = ref<string>('定位')
const conTabId = ref(1)
interface tabType {
    id: number,
    name: string
}
const conTabList = ref<tabType[]>([

])

const houseParams = ref<any>({
    position: '',
    communityName: '',
    recordName: '',
    constructionArea: 0,
    buildingNo: '',
    signature: '',
    houseFileList: [
        {
            drawingIds: '',
            fileIds: '',
            type: 1
        }
    ]
})


const fileInfoList = ref<houseType[]>([
    {
        houseFileId: 0,
        drawingPathList: [],
        price: 0,
        vipPrice: 0,
        type: 1,
        externalLinks: '',
        cadFileName: ''
    }, {
        houseFileId: 0,
        drawingPathList: [],
        price: 0,
        vipPrice: 0,
        type: 2,
        externalLinks: '',
        cadFileName: ''
    }, {
        houseFileId: 0,
        drawingPathList: [],
        price: 0,
        vipPrice: 0,
        type: 3,
        externalLinks: '',
        cadFileName: ''
    }, {
        houseFileId: 0,
        drawingPathList: [],
        price: 0,
        vipPrice: 0,
        type: 4,
        externalLinks: '',
        cadFileName: ''
    }, {
        houseFileId: 0,
        drawingPathList: [],
        price: 0,
        vipPrice: 0,
        type: 5,
        externalLinks: '',
        cadFileName: ''
    }
])
const houseId: any = inject('houseId', 0)
const conTabClick = (id: number) => {
    conTabId.value = id
}

const downFileFun = (houseId: any, houseFileId: any) => {
    const down = document.createElement('a');
    down.style.display = 'none';
    down.href = `http://106.54.190.26:10001/houseModel/downloadFile?houseId=${houseId}&houseFileId=${houseFileId}`
    document.body.appendChild(down);
    down.click();
}
const getHouseInfo = () => {
    let params = {
        id: houseId.value
    }
    getHouseInfoApi(params).then((res: any) => {
        houseParams.value = res.data
        res.data.houseFileList.map((v: any) => {
            if (v.type == 1) {
                fileInfoList.value[0].houseFileId = v.id
                fileInfoList.value[0].drawingPathList = v.drawingPathList
                fileInfoList.value[0].price = v.price
                fileInfoList.value[0].vipPrice = v.vipPrice
                fileInfoList.value[0].cadFileName = v.cadFileName

            }
            if (v.type == 2) {
                fileInfoList.value[1].houseFileId = v.id
                fileInfoList.value[1].drawingPathList = v.drawingPathList
                fileInfoList.value[1].price = v.price
                fileInfoList.value[1].vipPrice = v.vipPrice
                fileInfoList.value[1].cadFileName = v.cadFileName
            }
            if (v.type == 3) {
                fileInfoList.value[2].houseFileId = v.id
                fileInfoList.value[2].drawingPathList = v.drawingPathList
                fileInfoList.value[2].price = v.price
                fileInfoList.value[2].vipPrice = v.vipPrice
                fileInfoList.value[2].externalLinks = v.externalLinks

            }
            if (v.type == 4) {
                fileInfoList.value[3].houseFileId = v.id
                fileInfoList.value[3].drawingPathList = v.drawingPathList
                fileInfoList.value[3].price = v.price
                fileInfoList.value[3].vipPrice = v.vipPrice
                fileInfoList.value[3].externalLinks = v.externalLinks

            }
            if (v.type == 5) {
                fileInfoList.value[4].houseFileId = v.id
                fileInfoList.value[4].drawingPathList = v.drawingPathList
                fileInfoList.value[4].price = v.price
                fileInfoList.value[4].vipPrice = v.vipPrice
                fileInfoList.value[4].externalLinks = v.externalLinks
            }
            let tabObj = {
                id: v.type,
                name: v.typeName
            }
            console.log('看看文件：', fileInfoList.value)
            conTabList.value.push(tabObj)
        })


        res.data.houseFileList.map((v: any) => {
            if (v.drawingPathList) {
                let obj = {
                    url: v.drawingPathList[0]
                }
                fileList.value.unshift(obj)
            }
        })
    })
}
getHouseInfo()
const priceIptChange = () => {
    emit('priceChange', fileInfoList.value)
}

// onMounted(() => {
//     getHouseInfo()

// })
</script>
<style scoped>
.priceIptSty {
    width: 160px;
    margin-left: 20px;
    margin-right: 50px;
}

.text_area_sty {
    width: 450px;
    height: 120px;
}

.btnSty {
    padding: 6px 12px;
    background-color: #A19EA8;
    color: #fff;
    font-size: 18px;
    border-radius: 4px;
    margin-left: 30px;
    margin-right: 12px;

}

.wenjian_tit_sty {
    margin-right: 30px;

}

.imgNameSty {
    width: 27%;
    margin-right: 30px;
}

.txtSty {
    font-size: 16px;
    color: #A19EA8;
    margin-top: 20px;
}


.con_tab_sty {
    border: 8px solid #f0f0f0;
    padding: 8px 0;
}

.con_tab_sty div {
    margin: 0 20px;
}

.con_tit {
    width: 100%;
}

.con_tit el-input {
    width: 360px;
}

.con_tit div {
    margin-bottom: 20px;
    margin-right: 20px;
}

.cascSty {
    width: 240px;
}


.mainSty {
    width: 80%;
    /* min-height: 500px; */
}

.main_con_sty {
    width: 100%;
    background-color: #fff;
    padding: 30px 20px;
}
</style>